<template>
  <div class="table-main">
    <div class="tab-search">
      <div class="search-cont">
        <div class="search-name">收货人姓名:</div>
        <el-input v-model="searchFrom.nickName" placeholder="请输入内容"></el-input>
      </div>
      <div class="search-btns">
        <el-button type="primary" size="small" @click="handSearch()">查询</el-button>
        <el-button size="small" @click="reset()">重置</el-button>
      </div>
    </div>
    <!-- <div class="hadn-new">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="handAdd()">新建</el-button>
      <el-popconfirm title="确定删除吗?" @onConfirm="onConfirm">
        <el-button slot="reference" size="small" icon="el-icon-minus" @click="handSeleDel">删除</el-button>
      </el-popconfirm>
    </div>-->
    <div class="hand-btns">
      <span class="el-icon-warning" style="color:#38AD93;"></span>
      <span class="btns-title">
        已选择
        <span style="color:#38AD93;">{{multipleSelection.length}}</span> 项
      </span>
      <span class="btns-clos pointer" @click="handSeleColse">清空</span>
    </div>
    <div v-loading="loading">
      <el-tabs type="border-card" v-model="editableTabsValue" @tab-click="handleClickTable">
        <el-tab-pane label="全部" v-for="(item) in editableTabs" :key="item.id" :name="item.id">
          <span slot="label">{{item.title}}</span>
          <!-- {{item.id}} -->
          <div class="card_box">
            <el-card class="goods_box" v-for="item in tableData" :key="item.id">
              <div>
                <div class="order_num_box">
                  <!-- <el-checkbox @change="handChangeCheck(item)" v-model="item.visible2"></el-checkbox> -->
                  <span class="order_num">订单编号：{{item.orderNo==null?'无':item.orderNo}}</span>
                  <span class="order_time">下单时间：{{item.createTime}}</span>
                </div>
                <div class="order_shop_box">
                  <div class="shop_title">商家信息:</div>
                  <div class="shop_name">{{item.shopName}}</div>
                </div>
                <div class="tab_cent" v-if="tableData2.length!=0">
                  <el-table border :data="tableData2" style="width: 100%">
                    <el-table-column
                      v-if="item.orderGoods.length!=0"
                      prop="date"
                      label="商品详情"
                      width="460"
                    >
                      <template>
                        <div
                          class="goods_details"
                          v-for="goodsItem in item.orderGoods"
                          :key="goodsItem.id"
                        >
                          <!-- <img :src="goodsItem.goodImg" class="deta_img" alt /> -->
                          <el-image
                            style="width: 66px; height: 66px;margin-left: 33px;margin-right:10px;"
                            :src="goodsItem.goodImg"
                            :preview-src-list="goodsItem.newGoodImg"
                          ></el-image>
                          <div class="deta_title_box" v-if="goodsItem.goods">
                            <div class="title">{{goodsItem.goods.goodName}}</div>
                            <div class="title_class">
                              <div class="clas_dis">
                                <div class="cla_pic">价格: ￥{{goodsItem.goodPrice}}</div>
                                <div class="pic_num">× {{goodsItem.goodNum}}</div>
                              </div>
                              <div class="clas_dis2">
                                <div class="cla_pic">
                                  <div style="margin-right:10px">规格:</div>
                                  <el-tag>{{goodsItem.goodName}}</el-tag>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="订单金额" width="200">
                      <template>
                        <div class="order_monery">
                          <div
                            class="monery_num"
                            style="color: #FA6400;"
                          >实付金额：{{item.payMoeny==null?'0':item.payMoeny}}元</div>
                          <div
                            class="monery_num"
                          >(优惠: {{item.couponMoeny==null?'0':item.couponMoeny}}元)</div>
                          <div
                            class="monery_num"
                          >(含配送费: {{item.deliverMoney==null?'0':item.deliverMoney}}元)</div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="address" label="交易状态">
                      <template>{{item.orderStatus==1?'待发货':(item.orderStatus==2?'配送中':(item.orderStatus==3?'用户确定收获':(item.orderStatus==4?'未付款的订单':(item.orderStatus==5?'用户拒收':'平台取消交易'))))}}</template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                      <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handPopClos(item,scope.row)">详情</el-button>
                        <el-button
                          size="mini"
                          type="text"
                          @click="handDeliver(item)"
                          v-if="item.orderStatus==1||item.item==4"
                        >发货</el-button>
                        <el-button size="mini" type="text" @click="handVote(item,scope.row)">打印小票</el-button>
                        <div>
                          <el-switch
                            :disabled="item.staIsChk"
                            @change="changeSwitch(item)"
                            v-model="item.staIsChk"
                            active-color="#38AD93"
                            active-text="是否关闭交易"
                          ></el-switch>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="order_shop_box" style="border-top:0;">
                  <div class="shop_title">买家信息:</div>
                  <div class="shop_name">
                    <span class="buyer_name">收货人：{{item.nickName}}</span>
                    <span class="buyer_name">联系方式：{{item.telPhone==null?'无':item.telPhone}}</span>
                    <span class="buyer_name">收货地址：{{item.address}}</span>
                  </div>
                </div>
                <div class="order_shop_box">
                  <div class="shop_title">备注信息:</div>
                  <div class="shop_name">{{!item.orderRemarks?'无':item.orderRemarks}}</div>
                </div>
              </div>
            </el-card>
          </div>
          <div
            v-if="tableData==null||tableData.length==0"
            style="text-align:center;color:#909399;font-size:14px;"
          >暂无数据</div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="pags_box">
      <el-pagination
        @size-change="handBidleSizeChange"
        @current-change="handBidleCurrentChange"
        :current-page="pageBid.start"
        :page-sizes="[5,10,15]"
        :page-size="pageBid.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBid.totalCount"
      ></el-pagination>
    </div>
    <shopDig :isState="isState" ref="shopDig"></shopDig>
    <oneVote ref="oneVote"></oneVote>
    <!-- <el-dialog title="商铺信息录入" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <shopDig></shopDig>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>-->
  </div>
</template>

<script>
import axios from 'axios'
import shopDig from './shopDig/index'
import oneVote from './oneVote/index'
export default {
  name: 'SidebarLogo',
  components: {
    shopDig,
    oneVote
  },
  data() {
    return {
      value22: false,
      tableData2: [1],
      editableTabsValue: '0',
      editableTabs: [
        {
          title: '全部',
          id: '0',
          content: 'Tab 1 content'
        },
        {
          title: '待发货',
          id: '1',
          content: 'Tab 2 content'
        },
        {
          title: '配送中',
          id: '2',
          content: 'Tab 2 content'
        },
        {
          title: '确认收货',
          id: '3',
          content: 'Tab 2 content'
        },
        {
          title: '未付款',
          id: '4',
          content: 'Tab 2 content'
        },
        {
          title: '拒绝收货',
          id: '5',
          content: 'Tab 2 content'
        },
        {
          title: '取消交易',
          id: '6',
          content: 'Tab 2 content'
        }
      ],
      dialogVisible: false,
      title: '茶城通',
      logo:
        'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png',
      searchFrom: {
        nickName: ''
        // shopStatus: ''
      },
      staArr: ['已发货', '代发货'],
      shopStatusOptions: [
        {
          label: '已通过',
          value: '1'
        },
        {
          label: '未审核',
          value: '2'
        },
        {
          label: '已拒绝',
          value: '3'
        }
      ],
      tableData: [],
      multipleSelection: [],
      loading: true,
      pageBid: {
        start: 1,
        limit: 10,
        totalCount: 0,
        tatalpage: 0
      },
      isState: 0,
      form: {},
      ids: '',
      valIndex: 0
    }
  },
  mounted() {
    this.loading = true
    this.$api
      .getOrderByPage({ page: this.pageBid.start, limit: this.pageBid.limit })
      .then(res => {
        console.log(res, '获取全部订单')
        this.loading = false
        res.data.data.forEach(item => {
          item.visible2 = false
          if (item.orderStatus == 6) {
            item.staIsChk = true
          } else {
            item.staIsChk = false
          }
          item.orderGoods.forEach(ele => {
            // ele.newGoodImg = ele.goodImg.split(',')
            if (ele.goodImg != null) {
              ele.newGoodImg = ele.goodImg.split(',')
            }
          })
        })
        this.tableData = res.data.data
        this.pageBid.totalCount = res.data.count
      })
  },
  methods: {
    handVote(row) {
      this.$refs.oneVote.handGetShop(row.id)
      this.$refs.oneVote.centerDialogVisible = true
    },
    changeSwitch(val) {
      this.$api.getEditOrder({ orderStatus: 6, id: val.id }).then(res => {
        this.$message({
          message: res.data.message,
          showClose: true,
          type: 'success'
        })
        this.tableData2 = []
        this.init()
        console.log(res, '平台取消交易', this.tableData)
      })
    },
    handDeliver(item) {
      this.$api.getEditOrder({ orderStatus: 2, id: item.id }).then(res => {
        this.$message({
          message: res.data.message,
          showClose: true,
          type: 'success'
        })
        this.tableData2 = []
        this.init()
        console.log(res, '发货', this.tableData)
      })
    },
    // orderStatus
    handleClickTable(val) {
      console.log('id', val.index)
      this.valIndex = val.index
      this.init({ orderStatus: val.index })
    },
    handChangeCheck(item) {
      this.tableData.forEach(ele => {
        if (item.id == ele.id) item.visible2 = true
      })
      console.log(item)
    },
    //清空选中
    handSeleColse() {
      this.$refs.multipleTable.clearSelection()
    },
    closeFrom() {
      this.form = {}
    },
    handleClose() {
      this.dialogVisible = false
    },
    handAdd() {
      this.isState = 0
      // this.dialogVisible = true
      this.$refs.shopDig.dialogVisible1 = true
      this.$refs.shopDig.handGoodsTypeTreeinfo()
    },
    handSearch() {
      this.init(this.searchFrom)
    },
    reset() {
      this.searchFrom.nickName = ''
      this.init()
    },
    handDetail(row) {
      this.isState = 3
      this.form = row
      this.$refs.shopDig.handGetShop(row.id)
      this.$refs.shopDig.handGoodsTypeTreeinfo()
      this.$refs.shopDig.dialogVisible1 = true
    },
    handEdit(row) {
      this.isState = 1
      this.form = row
      this.$refs.shopDig.handGetShop(row.id)
      this.$refs.shopDig.handGoodsTypeTreeinfo()
      this.$refs.shopDig.dialogVisible1 = true
    },
    handPopClos(row) {
      this.$refs.shopDig.handGetShop(row.id)
      // this.$refs.shopDig.handGoodsTypeTreeinfo()
      this.$refs.shopDig.dialogVisible1 = true
    },
    handPopDel(row) {
      this.$api.getDelGoodsTypee({ id: row.id }).then(res => {
        console.log(res, '删除')
        if (res.data.code == 200) {
          // this.$message(res.data.message)
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.$refs[`popover-` + row.id].doClose()
          this.init()
        }
      })
    },
    handDel(row) {
      // row.visible2 = true
      this.$set(row, 'visible2', true)
    },
    init(searchObj) {
      if (searchObj == '' || !searchObj) {
        searchObj = {}
      }
      console.log(searchObj, this.valIndex, '测试')
      if (this.valIndex) {
        this.searchFrom.orderStatus = this.valIndex
      }

      this.loading = true
      this.$api
        .getOrderByPage({
          page: this.pageBid.start,
          limit: this.pageBid.limit,
          searchObj: this.searchFrom
        })
        .then(res => {
          this.loading = false
          this.tableData = res.data.data
          this.pageBid.totalCount = res.data.count
          this.tableData.forEach(item => {
            if (item.orderStatus == 6) {
              item.staIsChk = true
            } else {
              item.staIsChk = false
            }
            item.visible2 = false
            item.orderGoods.forEach(ele => {
              if (ele.goodImg != null) {
                ele.newGoodImg = ele.goodImg.split(',')
              }
            })
          })
          console.log(this.tableData, '商品')
          // this.$forceUpdate()
          this.tableData2 = [1]
        })

      this.$forceUpdate()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    //多选删除
    handSeleDel() {},
    onConfirm() {
      if (this.ids != '') {
        this.$api.getDelGoodsTypee({ id: this.ids }).then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: 'success'
            })
            this.init()
          }
        })
      } else {
        this.$message('请至少选择一条')
      }
      console.log('queding')
    },
    handleSelectionChange(val) {
      this.multipleSelection = []
      val.forEach(item => {
        this.multipleSelection.push(item.id)
      })
      this.ids = this.multipleSelection.join(',')
      console.log(this.multipleSelection.join(','), '多选')
    },
    handBidleSizeChange(val) {
      this.pageBid.limit = val
      this.init()
    },
    handBidleCurrentChange(val) {
      this.pageBid.start = val
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.tag_box_flex {
  display: flex;
  align-items: center;
}
.cla_pic /deep/ .el-tag {
  color: #fff;
  background-color: #38ad93;
}
.buyer_name {
  color: #000000;
  font-size: 14px;
  margin-right: 48px;
}
.order_monery {
  .monery_num {
    color: #000;
    font-size: 14px;
    margin-bottom: 12px;
  }
}
.goods_details:last-child {
  border-bottom: 0;
}
.goods_details {
  display: flex;
  padding: 30px 0;
  border-bottom: 1px solid #dfe6ec;
  align-items: center;
  .deta_img {
    width: 66px;
    height: 66px;
    min-width: 66px;
    min-height: 66px;
    margin-right: 50px;
    margin-left: 50px;
  }
  .deta_title_box {
    text-align: left;

    .title {
      color: #000000;
      font-size: 14px;
      white-space: nowrap;
    }
    .title_class {
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      // white-space: nowrap;
      margin-top: 10px;
      .clas_dis {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
      }
      .clas_dis2 {
        margin-top: 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
      .cla_pic {
        color: #38ad93;
        font-size: 14px;
        display: flex;
        align-items: center;
      }
      .pic_num {
        color: #fa6400;
        font-size: 14px;
      }
    }
  }
}
.tab_cent /deep/ .cell {
  text-align: center;
  padding-left: 0 !important;
  padding-right: 0;
}
// .tab_cent /deep/ .el-table_1_column_1 .cell {
//   padding-left: 0;
//   padding-right: 0;
// }
.card_box /deep/ .el-card__body {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.goods_box {
  margin-bottom: 30px;
  .order_shop_box {
    display: flex;
    align-items: center;
    border-top: 1px solid #dfe6ec;
    // border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    .shop_title {
      color: #000000;
      font-size: 14px;
      padding: 13px 30px;
      border-right: 1px solid #dfe6ec;
    }
    .shop_name {
      color: #000000;
      padding: 13px 30px;
      font-size: 14px;
    }
  }
  .order_num_box {
    padding: 0 30px;
    margin-bottom: 9px;
    .order_num {
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 17px;
      margin: 0 9px;
    }
    .order_time {
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 17px;
    }
  }
}
.banner_img {
  width: 46px;
  height: 46px;
}
.shop_btns .el-button {
  color: #38ad93 !important;
}
.sige_box {
  display: flex;
  align-items: center;

  .sige {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    // background: rgba(82, 196, 26, 1);
    display: block;
    margin-right: 7px;
  }
}

.table-main {
  background-color: #fff;

  .hand-btns {
    height: 40px;
    border: 1px solid rgba(56, 173, 147, 0.17);
    line-height: 40px;
    border: 5px;
    background-color: #ebf6f4;
    padding: 0 16px;
    .btns-title {
      color: #000000;
      font-size: 14px;
      margin: 0 14px;
    }
    .btns-clos {
      color: #4eb69f;
      font-size: 14px;
    }
  }
  .hadn-new {
    margin-bottom: 24px;
  }
  .search-btns {
    display: flex;
    align-content: center;
    //
    .search-btn {
      width: 65px;
      height: 32px;
      background: rgba(56, 173, 147, 1);
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      line-height: 32px;
      text-align: center;
      margin-right: 8px;
    }
    .search-reset {
      background-color: #fff;
      color: #000;
      border: 1px solid rgba(217, 217, 217, 1);
    }
  }
  .tab-search {
    display: flex;
    align-content: center;
    margin-bottom: 28px;
    .search-cont:first-child {
      margin-right: 85px;
    }
    .search-cont {
      display: flex;
      align-content: center;
      line-height: 32px;
      .search-name {
        font-size: 14px;
        color: #000;
        margin-right: 12px;
      }
    }
  }
}
</style>
